<template>
  <view class="history-page">
    <view class="page-header">
      <u-navbar
        title="积分记录"
        :autoBack="true"
        bgColor="#fff"
      />
    </view>
    
    <view class="history-content">
      <!-- 统计信息 -->
      <view class="stats-section">
        <view class="stats-card">
          <view class="stat-item">
            <text class="stat-value">{{ totalPoints }}</text>
            <text class="stat-label">总积分</text>
          </view>
          <view class="stat-divider"></view>
          <view class="stat-item">
            <text class="stat-value">{{ earnedPoints }}</text>
            <text class="stat-label">已获得</text>
          </view>
          <view class="stat-divider"></view>
          <view class="stat-item">
            <text class="stat-value">{{ usedPoints }}</text>
            <text class="stat-label">已使用</text>
          </view>
        </view>
      </view>
      
      <!-- 筛选标签 -->
      <view class="filter-tabs">
        <view 
          v-for="filter in filters" 
          :key="filter.value"
          class="filter-item"
          :class="{ active: currentFilter === filter.value }"
          @click="switchFilter(filter.value)"
        >
          {{ filter.label }}
        </view>
      </view>
      
      <!-- 积分记录列表 -->
      <view class="history-list">
        <view 
          v-for="record in filteredRecords" 
          :key="record.id"
          class="history-item"
        >
          <view class="record-icon">
            <u-icon 
              :name="getRecordIcon(record.type)" 
              :color="getRecordColor(record.type)" 
              size="40" 
            />
          </view>
          <view class="record-content">
            <view class="record-title">
              <text class="record-name">{{ record.title }}</text>
              <text 
                class="record-points"
                :class="{ 'positive': record.points > 0, 'negative': record.points < 0 }"
              >
                {{ record.points > 0 ? '+' : '' }}{{ record.points }}
              </text>
            </view>
            <text class="record-description">{{ record.description }}</text>
            <text class="record-time">{{ formatTime(record.createdAt) }}</text>
          </view>
        </view>
      </view>
      
      <!-- 空状态 -->
      <empty-state
        v-if="filteredRecords.length === 0"
        title="暂无积分记录"
        description="完成更多任务获得积分吧"
        :show-button="true"
        button-text="去做任务"
        @click="goToTasks"
      />
    </view>
  </view>
</template>

<script>
import { formatRelativeTime } from '@/utils/format.js'
import EmptyState from '@/components/empty-state/index.vue'

export default {
  name: 'PointsHistory',
  components: {
    EmptyState
  },
  data() {
    return {
      currentFilter: 'all',
      filters: [
        { value: 'all', label: '全部' },
        { value: 'earned', label: '获得' },
        { value: 'used', label: '使用' }
      ],
      historyRecords: [
        {
          id: 1,
          title: '每日签到',
          description: '连续签到第7天，获得额外奖励',
          points: 50,
          type: 'sign',
          createdAt: new Date(Date.now() - 1000 * 60 * 30)
        },
        {
          id: 2,
          title: '完成订单',
          description: '订单#20241201001完成获得积分',
          points: 120,
          type: 'order',
          createdAt: new Date(Date.now() - 1000 * 60 * 60 * 2)
        },
        {
          id: 3,
          title: '情侣任务',
          description: '与伴侣一起完成"甜蜜合影"任务',
          points: 200,
          type: 'task',
          createdAt: new Date(Date.now() - 1000 * 60 * 60 * 5)
        },
        {
          id: 4,
          title: '积分兑换',
          description: '兑换情侣套餐优惠券',
          points: -500,
          type: 'exchange',
          createdAt: new Date(Date.now() - 1000 * 60 * 60 * 24)
        },
        {
          id: 5,
          title: '首次登录',
          description: '首次登录奖励',
          points: 100,
          type: 'register',
          createdAt: new Date(Date.now() - 1000 * 60 * 60 * 24 * 3)
        },
        {
          id: 6,
          title: '分享邀请',
          description: '成功邀请好友注册',
          points: 150,
          type: 'invite',
          createdAt: new Date(Date.now() - 1000 * 60 * 60 * 24 * 5)
        }
      ]
    }
  },
  computed: {
    totalPoints() {
      return this.historyRecords.reduce((sum, record) => sum + record.points, 0)
    },
    earnedPoints() {
      return this.historyRecords
        .filter(record => record.points > 0)
        .reduce((sum, record) => sum + record.points, 0)
    },
    usedPoints() {
      return Math.abs(this.historyRecords
        .filter(record => record.points < 0)
        .reduce((sum, record) => sum + record.points, 0))
    },
    filteredRecords() {
      if (this.currentFilter === 'all') {
        return this.historyRecords
      } else if (this.currentFilter === 'earned') {
        return this.historyRecords.filter(record => record.points > 0)
      } else {
        return this.historyRecords.filter(record => record.points < 0)
      }
    }
  },
  methods: {
    formatTime(date) {
      return formatRelativeTime(date)
    },
    
    getRecordIcon(type) {
      const iconMap = {
        sign: 'calendar',
        order: 'shopping-cart',
        task: 'star-fill',
        exchange: 'gift',
        register: 'person-add',
        invite: 'share'
      }
      return iconMap[type] || 'heart-fill'
    },
    
    getRecordColor(type) {
      const colorMap = {
        sign: '#007aff',
        order: '#34c759',
        task: '#ff9500',
        exchange: '#ff4757',
        register: '#5856d6',
        invite: '#30d158'
      }
      return colorMap[type] || '#007aff'
    },
    
    switchFilter(filter) {
      this.currentFilter = filter
    },
    
    goToTasks() {
      uni.navigateTo({ url: '/pages/points/tasks' })
    }
  }
}
</script>

<style lang="scss" scoped>
.history-page {
  min-height: 1334rpx;
  background: #f5f5f5;
}

.page-header {
  :deep(.u-navbar) {
    border-bottom: 1rpx solid #f5f5f5;
}
}

.history-content {
  padding: 24rpx;
}

.stats-section {
  margin-bottom: 32rpx;
}

.stats-card {
  background: #fff;
  border-radius: 16rpx;
  padding: 40rpx 0;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.stat-value {
  font-size: 48rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 8rpx;
}

.stat-label {
  font-size: 24rpx;
  color: #666;
}

.stat-divider {
  width: 1rpx;
  height: 60rpx;
  background: #f0f0f0;
}

.filter-tabs {
  display: flex;
  background: #fff;
  border-radius: 16rpx;
  padding: 8rpx;
  margin-bottom: 32rpx;
}

.filter-item {
  flex: 1;
  text-align: center;
  padding: 16rpx;
  font-size: 28rpx;
  color: #666;
  border-radius: 12rpx;
  
  &.active {
    background: #ff4757;
    color: #fff;
}
}

.history-list {
  display: flex;
  flex-direction: column;
   margin-right: 16rpx; &:last-child { margin-right: 0; }
}

.history-item {
  display: flex;
  background: #fff;
  border-radius: 16rpx;
  padding: 32rpx;
  align-items: flex-start;
   margin-right: 24rpx; &:last-child { margin-right: 0; }
}

.record-icon {
  width: 80rpx;
  height: 80rpx;
  background: rgba(0, 122, 255, 0.1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.record-content {
  flex: 1;
}

.record-title {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 8rpx;
}

.record-name {
  font-size: 32rpx;
  font-weight: 500;
  color: #333;
}

.record-points {
  font-size: 32rpx;
  font-weight: bold;
  
  &.positive {
    color: #34c759;
}
  
  &.negative {
    color: #ff4757;
}
}

.record-description {
  font-size: 26rpx;
  color: #666;
  display: block;
  margin-bottom: 8rpx;
}

.record-time {
  font-size: 24rpx;
  color: #999;
}
</style>